<script setup lang="ts">
import type { CSSProperties } from 'vue'

const props = withDefaults(defineProps<{
  label: string
  direction?: 'row' | 'column'
}>(), {
  direction: 'row',
})

const containerStyle = computed(() => {
  if (props.direction === 'row') {
    return {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    } as CSSProperties
  }
  else {
    return {
      flexDirection: 'column',
    }
  }
})
</script>

<template>
  <view class="flex" :style="containerStyle">
    <view class="text-32rpx text-#666666 leading-45rpx">
      {{ props.label }}
    </view>
    <Spacer h="28" />
    <view class="text-32rpx text-#333333 font-medium leading-45rpx">
      <slot />
    </view>
  </view>
</template>
